<template>
	<view>
		<!-- 条件编译 除H5显示 -->
		<!-- #ifndef H5 -->
		<!-- 设备状态栏 -->
		<view :style="{height:phoneObj.statusBarHeight+'px',width:'100%'}" :class="bgColor ? 'bgColor' : ''"></view>
		<!-- 导航栏 -->
		<view :style="{height:phoneObj.navBarHeight+'px',width:'100%'}" :class="bgColor ? 'bgColor' : ''">
			<!-- 主页显示 -->
			<view v-if="searchShow" class="navBar" :style="{height:phoneObj.navBarHeight+'px',lineHeight:phoneObj.navBarHeight+'px',width:phoneObj.navBarWidth+'px'}">
				<image :src="avatar" @tap="jumpUser()" class="navBar-img" mode="aspectFill"></image>
				<!-- 搜索栏 -->
				<view class="search" :class="focusShow ? 'searchFocus' : ''">
					<input type="text" @focus="focus" @blur="blur" class="search-input"
						:class="focusShow ? 'inputFocus' : ''" v-model.trim="keyword" confirm-type="search"
						placeholder="请输入壁纸名" placeholder-style="font-size:26rpx">
					<text v-show="clearShow" @tap="handleClear()" class="clear iconfont icon-tubiao_qingchu" :class="focusShow ? 'clearFocus' :''"></text>
				</view>
				<text @tap="handleSearch()" class="search-icon iconfont icon-sousuo" :class="focusShow ? 'searchIconFocus' : ''"></text>
			</view>

			<!-- 其他页面显示 -->
			<view v-else class="page-nav" :style="{height:phoneObj.navBarHeight+'px',lineHeight:phoneObj.navBarHeight+'px',width:phoneObj.navBarWidth+'px'}">
				<view class="loader"></view>
				<text class="page-text">{{pageTitle}}</text>
			</view>
		</view>
		<view :style="{height:'10rpx',width:'100%'}"></view>
		<!-- #endif -->
		
		<!-- 条件编译 H5显示 -->
		<!-- #ifdef H5 -->
		<view>
			<!-- 主页显示 -->
			<view v-if="searchShow" class="navBar">
				<image :src="avatar" @tap="jumpUser()" class="navBar-img" mode="aspectFill"></image>
				<!-- 搜索栏 -->
				<view class="search" :class="focusShow ? 'searchFocus' : ''">
					<input type="text" @focus="focus" @blur="blur" class="search-input"
						:class="focusShow ? 'inputFocus' : ''" v-model.trim="keyword" confirm-type="search"
						placeholder="请输入壁纸名" placeholder-style="font-size:26rpx">
					<text v-show="clearShow" @tap="handleClear()" class="clear iconfont icon-tubiao_qingchu" :class="focusShow ? 'clearFocus' :''"></text>
				</view>
				<text @tap="handleSearch()" class="search-icon iconfont icon-sousuo" :class="focusShow ? 'searchIconFocus' : ''"></text>
			</view>
		
			<!-- 其他页面显示 -->
			<view v-else class="page-nav">
				<view class="loader"></view>
				<text class="page-text">{{pageTitle}}</text>
			</view>
		</view>
		<view :style="{height:'10rpx',width:'100%'}"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: "navBar",
		props: {
			pageTitle: String,
			searchShow: {
				type: Boolean,
				default: false
			},
			bgColor:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				keyword: '',
				// 如果文本框有内容显示
				clearShow: false,
				// 输入框是否聚焦
				focusShow: false,
			};
		},
		computed:{
			...mapState('phoneInfo',['phoneObj']),
			// 用户头像
			avatar(){
				return this.$store.state.user.userInfo.avatar
			}
		},
		methods: {
			// 跳转至用户页
			jumpUser() {
				uni.switchTab({
					url: '/pagesD/user/user'
				})
			},
			// 清空文本框内容
			handleClear() {
				this.keyword = ''
			},
			// 搜索
			handleSearch() {
				console.log('搜索');
			},
			// 获取焦点
			focus(e) {
				if (e.mp.type === 'focus') {
					this.focusShow = true
				}
			},
			// 失去焦点
			blur(e) {
				if (e.mp.type === 'blur') {
					this.focusShow = false
				}
			}
		},
		watch: {
			keyword(newVal, oldVal) {
				if (newVal !== '') {
					this.clearShow = true
				} else {
					this.clearShow = false
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.bgColor{
		background-color: #151515;
	}
	// H5显示
	/*#ifdef H5*/
	.navBar{
		// top: 20rpx;
		padding: 30rpx 0;
		backdrop-filter: blur(3px); //毛玻璃效果
	}
	.page-nav{
		backdrop-filter: blur(3px); //毛玻璃效果
		padding: 40rpx 0;
	}
	/*#endif*/
	
	.navBar {
		position: fixed;
		left: 20rpx;
		z-index: 999;
		width: 100%;
		display: flex;
		align-items: center;

		// 头像
		.navBar-img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}


		// 搜索栏
		.search {
			border: 1px solid transparent;
			border-radius: 35rpx;
			padding: 8rpx 0;
			width: 230rpx;
			transition: .3s;
			display: flex;
			align-items: center;
			background: #3D3D3D;
			height: 37rpx !important; 

			// 输入框
			.search-input {
				padding-left: 20rpx;
				font-size: 26rpx;
				width: 190rpx;
				border-radius: 35rpx;
				transition: .3s;
			}

			.clear {
				padding: 0 20rpx 0 10rpx;
				font-size: 30rpx;
			}
		}

		.searchFocus {
			width: 320rpx !important;
			background-color: #24bfa5;
		}

		.inputFocus {
			width: 270rpx !important;
		}
		
		.clearFocus{
			color: #282c35;
		}

		.searchIconFocus {
			transform: rotate(360deg);
			color: #24bfa5;
		}

		// 搜索图标
		.search-icon {
			transition: .8s;
			margin-left: 10rpx;
			font-size: 40rpx;
		}

	}
	
	.page-nav{
		position: fixed;
		z-index: 9;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		.page-text{
			color: #24bfa5;
			font-size: 30rpx;
		}
	}

	// 加载
	.loader {
		width: 1.2em;
		height: 1.2em;
		margin-right: 25rpx;
		background: linear-gradient(360deg, #fc00ff 0%, #00dbde 100%);
		animation: spin 3s infinite;
	}

	.loader::before {
		content: "";
		z-index: -1;
		position: absolute;
		inset: 0;
		background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);
		transform: translate3d(0, 0, 0) scale(0.95);
		filter: blur(20px);
	}

	@keyframes spin {
		0% {
			transform: rotate(-45deg);
		}

		50% {
			transform: rotate(-360deg);
			border-radius: 50%;
		}

		100% {
			transform: rotate(-45deg);
		}
	}
</style>